<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,body{
				width: 100%;
				overflow-x: hidden;
				margin: 0;
				padding: 0;
			}
			body {
				padding: 10px;
				box-sizing: border-box;
				background-image: url(img/bg.jpg);
				background-size: cover;
				background-repeat: no-repeat;
			}
			input[type='file'] {
				display: none;
			}
			button {
				border: 1px solid #1a90e3;
				padding: 5px 10px;
				outline: none;
				background-color: #1E9FFF;
				border-radius: 5px;
				color: aliceblue;
				cursor: pointer;
			}
			.move-btn {
				border: 1px solid #ff5500;
				background-color: #ff5500;
			}
			.hats {
				overflow-x: auto;
				overflow-y: hidden;
				width: 100%;
				max-height: 130px;
				white-space: nowrap;
				-webkit-overflow-scrolling:touch;
			}
			.hats div{
				display: inline-block;
				width: 100px;
				height: 100px;
				cursor: pointer;
				border-radius: 5px;
				box-sizing: border-box;
				vertical-align: middle;
			}
			.hats div:hover {
				background-color: rgba(198,227,239,0.5);
			}
			.hats div.selected {
				margin: 10px 0px;
				border: 2px dotted skyblue;
				background-color: rgba(135,206,235, 0.5);
			}
			.hats img{
				max-width: 100px;
				max-height: 100px;
			}
			.imgs-div{
				position: relative;
				overflow: hidden;
				padding: 0px;
				margin: 0px;
				height: max-content;
			}
			#hat-img {
				max-width: 100%;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			#upload-img, #confirm-img{
				max-height: 400px;
			}
			#tip {
			    position: fixed;
			    top: -40px;
			    width: 100%;
			    padding: 5px;
			    text-align: center;
			    left: 0px;
			    background: #3b71d6;
			    color: aliceblue;
				transition: top 1s;
				-moz-transition: top 1s; /* Firefox 4 */
				-webkit-transition: top 1s; /* Safari 和 Chrome */
				-o-transition: top 1s; /* Opera */
			}
			#tip.show{
				top : 0px;
			}
		</style>
	</head>
	<body>
		<div>
			<button type="button" class="upload-btn">上传图片</button>
			<button type="button" class="reset-btn" style="display: none;">还原操作</button>
			<button type="button" class="confirm-btn" style="display: none;">合成图片</button>
		</div>
		<div class="action-btns" style="display: none; padding-top: 5px;">
			<button type="button" class="move-btn" action="up">上</button>
			<button type="button" class="move-btn" action="down">下</button>
			<button type="button" class="move-btn" action="left">左</button>
			<button type="button" class="move-btn" action="right">右</button>
			<button type="button" class="move-btn" action="zoom-in">放大</button>
			<button type="button" class="move-btn" action="zoom-out">放小</button>
		</div>
		<input type="file" id="upload-file" accept="image/*"/>
		<div class="hats">
			<div draggable="true">
				<img src="img/hat1.png" />
			</div>
			<div draggable="true">
				<img src="img/hat2.png" />
			</div>
			<div draggable="true">
				<img src="img/hat3.png" />
			</div>
			<div>
				<img src="img/hat4.png" />
			</div>
			<div>
				<img src="img/hat5.png" />
			</div>
		</div>
		<div class="imgs-div">
			<img id="hat-img" />
			<img id="upload-img" />
			<img id="confirm-img" />
			<canvas id="my-canvas" height="200" width="200" style="display: none;"></canvas>
		</div>
		<div id="tip">颐和城</div>
		<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var $uploadFile = $('#upload-file'),
				$uploadImg = $('#upload-img'),
				$confirmImg = $('#confirm-img'),
				$hatImg = $('#hat-img'),
				$hatDiv = $('.hats div'),
				$actionBtns = $('.action-btns'),
				$tip = $('#tip'),
				$canvas = $('#my-canvas'),
				ctx = $canvas[0].getContext('2d'),
				startX,startY;
				$('.upload-btn').click(function(){
					$uploadFile.click();
				});
				
				$('.reset-btn').click(function(){
					$uploadImg.show();
					$hatImg.show();
					$confirmImg.hide();
					$uploadImg.attr('src') && $actionBtns.show();
					showTip('重置图片成功');
				});
				
				$('.confirm-btn').click(function(){
					var height = $uploadImg.height(),
					width = $uploadImg.width(),
					top = parseInt($hatImg.css('top')),
					left = parseInt($hatImg.css('left'));
					ctx.clearRect(0, 0, $canvas.width(), $canvas.height());
					$hatImg.hide();
					$uploadImg.hide();
					$actionBtns.hide();
					$confirmImg.show();
					$canvas.attr({
						height : height,
						width : width
					});
					ctx.drawImage($uploadImg[0], 0, 0, width, height);
					ctx.drawImage($hatImg[0], left, top, $hatImg.width(), $hatImg.height());
					$confirmImg.attr('src', $canvas[0].toDataURL("image/png"));
					showTip('合成图片成功，长按进行保存');
				});
				
				$hatDiv.click(function(){
					if ($uploadImg.attr('src') && $uploadImg.css('display') !== 'none') {
						var $selected = $('.hats div.selected'),
						$this = $(this);
						if ($selected[0] !== $this[0]) {
							$selected.removeClass('selected');
							$this.addClass('selected');
							$hatImg.attr('src', $this.children().attr('src'));
						}
					} else {
						 showTip(!$uploadImg.attr('src') ? '请先上传图片成功' : '请先点击还原操作');
					}
				});
				
				$uploadFile.change(function(e){
					if (this.files.length > 0) {
						var reader = new FileReader();
						reader.readAsDataURL(this.files[0]);  
						reader.onload = function(){
							$uploadImg.attr('src', this.result);
							$('.reset-btn').show();
							$('.confirm-btn').show();
							$actionBtns.show();
							showTip('上传图片成功');
						}
					}
				});
				
				$('.move-btn').click(function(){
					var action = $(this).attr('action'),
					win_w = $(window).width(),
					img_w = $hatImg.width(),
					top = parseInt($hatImg.css('top')),
					left = parseInt($hatImg.css('left'));
					if (action === 'up') {
						$hatImg.css('top', top - 5);
					} else if (action === 'down') {
						$hatImg.css('top', top + 5);
					} else if (action === 'left') {
						$hatImg.css('left', left - 5);
					} else if (action === 'right') {
						$hatImg.css('left', left + 5);
					} else if (img_w >= 0 && img_w < win_w) {
						if (action === 'zoom-in') {
							$hatImg.css('width', img_w + 5);
						}  else if (action === 'zoom-out') {
							$hatImg.css('width', img_w - 5);
						}
					}
				});
				
				function showTip(msg){
					$tip.html(msg).addClass('show');
					setTimeout(function(){
						$tip.html('').removeClass('show');
					},2000)
				}
			});
		</script>
</html>
